<template>
  <m-page-wrapper>
    <a-button @click="handleClick">修改pagination</a-button>
    <m-table 
    :api="'/sys/config/page'" 
    :columns="columns"
    :pagination="mPagination"
    :defaultSorter="defaultSorter"
    @change="handleTableChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'name'">
          <a-tag>
            {{ record.name }}
          </a-tag>
        </template>
      </template>
    </m-table>
  </m-page-wrapper>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
// 分页对象定义
const mPagination = reactive({
  current: 2,
  pageSize: 10,
  total: 0,
  showQuickJumper: true
})
const defaultSorter = ref({
  field: 'code'
})

const columns = ref([{
  title: '部门名称',
  dataIndex: 'name',
  key: 'name',
  sorter: true,
  defaultSortOrder: 'ascend'
},{
  title: '唯一编码',
  dataIndex: 'code',
  key: 'code',
  sorter: true,
  defaultSortOrder: 'ascend'
}])
const handleClick = () =>{
  mPagination.current = mPagination.current==1?mPagination.current=2:mPagination.current=1
}
const handleTableChange = (p: any, f: any, s: any) =>{
  console.log(p, f, s)
}
</script>
<style lang="less" scoped>
</style>